<template>
    <div class="app-container">
        <el-card class="box-card">
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="奖励名称" prop="product.title"></el-table-column>
                <el-table-column label="奖励ID" prop="product_id"></el-table-column>
                <el-table-column label="用户昵称" prop="user.nickname"></el-table-column>
                <el-table-column label="用户编号" prop="user.user_code"></el-table-column>
                <el-table-column label="情侣昵称" prop="target_user.nickname"></el-table-column>
                <el-table-column label="情侣编号" prop="target_user.user_code"></el-table-column>
                <el-table-column label="真实姓名" prop="name"></el-table-column>
                <el-table-column label="手机号码" prop="mobile"></el-table-column>
                <el-table-column label="邮寄地址" prop="address"></el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <!-- <el-button
                            size="mini"
                            type="text"
                            @click="handleCheck(scope.row)"
                        >查看
                        </el-button> -->
                        <el-button
                            size="mini"
                            type="text"
                            @click="handlesendParcel(scope.row)"
                        >发快递
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleNoNeedPost(scope.row)"
                        >无需邮寄
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>
  
        <el-dialog
            :visible.sync="dialogVisible2"
            title="详情"
            width="30%"
            @close="closeDialog('form2')"
        >
            <el-form ref="form2" :inline="false" :model="formDetail" :rules="rules" label-width="120px" size="normal">
                <el-form-item label="愿望清单" prop="">
                    <el-input v-model="formDetail.giftId" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="真实姓名" prop="">
                    <el-input v-model="formDetail.giftId" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="手机号码" prop="">
                    <el-input v-model="formDetail.giftId" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="性别" prop="">
                    <el-input v-model="formDetail.giftId" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="真实姓名" prop="">
                    <el-input v-model="formDetail.giftId" placeholder="" disabled />
                </el-form-item>
                <el-form-item label="手机号码" prop="">
                    <el-input v-model="formDetail.giftId" placeholder="" disabled />
                </el-form-item>
            </el-form>
    
            <span slot="footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible2 = false">确定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            :visible.sync="dialogVisible"
            title="发快递"
            width="30%"
            @close="closeDialog('form')"
        >
            <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="120px" size="normal">
                <el-form-item label="快递单号" prop="giftId">
                    <el-input v-model="formData.express_number" placeholder="请输入快递单号" />
                </el-form-item>
            </el-form>
    
            <span slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </span>
        </el-dialog>
    
    </div>
</template>
  
<script>
    import { entryList, entrySave } from '@/api/wishingHouse'
  
  	export default {
        name: 'registerList',
        components: {},
        data() {
            return {
                formDetail: {

                },
                dialogVisible: false,
                dialogVisible2: false,
                formData: {
                    express_number: undefined
                },
                rules: {
                    express_number: [{ required: true, message: '请输入快递单号', trigger: 'blur' }]
                },
                loading: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            indexMethod(index) {
                // return this.tableData.length - index
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
                }
                const {code, data} = await entryList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.list
                    this.total = data.meta.total
                }
                this.loading = false
        
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    // this.formData.status = undefined
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
                this.formData = {
                    express_number: undefined
                }
            },
            handleCheck(row) {
                this.dialogVisible2 = true
                this.formData = row
            },
            handlesendParcel(row) {
                this.dialogVisible = true
                this.formData.id = row.id
                this.formData.is_mail = '2'
            },
            handleNoNeedPost(row) {
                this.$confirm('确定无需邮寄？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.postEntrySave({
                        id: row.id,
                        is_mail: '1'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            postEntrySave(data) {
                entrySave(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                    }
                    this.getTableData()
                    this.dialogVisible = false
                })
            },
            onSubmit() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        
                        for (let key in this.formData) {
                            this.formData[key] = this.formData[key] === '' || this.formData[key] === undefined ? 0 : this.formData[key]
                        }
                        this.postEntrySave(this.formData)
                    }
                })
            }
        }
    }
</script>
  
<style lang="scss" scoped>
.infoBox {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border: 1px solid #999999;
  border-radius: 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  box-sizing: border-box;
  padding-right: 30px;
  .info_1{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;

    .info_2{
      margin-top: 15px;
      display: flex;
      align-items: center;
	  position: relative;

      span{
        width: 180px;
        text-align: right;
      }
	  .tip{
			color: red;
			font-size: 12px;
			position: absolute;
			top: 100%;
			left: 120px;
		}
    }
  }
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    
}

</style>
  